import { Image, View } from "@tarojs/components"
import { CSSProperties } from "react"
import Global from "../lib/global"

import "./avatar.scss"

interface AvatarProps {
    size?: number
    url: string
}

const Avatar = (props: AvatarProps) => {

    let size = props.size ?? 148

    let style: CSSProperties = {
        width: `${size}rpx`,
        height: `${size}rpx`,
        borderRadius: `${size / 2}rpx`
    }
    
    return (
        <View className="avatar" style={ style }>
            <Image className="avatar-img" mode="aspectFill" src={ props.url }/>
            <Image className="avatar-border" src={ Global.loadImage("border@3x.png") }/>
        </View>
    )
}

export default Avatar